<template>
  <div class="custom-date-picker">
    <div class="cdp-header">
      <el-select v-model="month" class="cdp-select" style="width: 85px;">
        <el-option
            v-for="size in 12"
            :key="size"
            :label="size+ ' 月'"
            :value="size"
          />
      </el-select>
      <el-select v-model="year" class="cdp-select">
        <el-option v-for="y in years" :key="y" :value="y" :label="y+ ' 年'"></el-option>
      </el-select>
      <button class="cdp-btn" @click="prevMonth">&lt;</button>
      <button class="cdp-btn"  @click="toToday"> <img src="@/assets/icon/round.png" style="width: 12px;" alt="" srcset=""> </button>
      <button class="cdp-btn" @click="nextMonth">&gt;</button>
    </div>
    <table class="cdp-table">
      <thead>
        <tr>
          <th v-for="d in weekDays" :key="d">{{ d }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, i) in calendarRows" :key="i">
          <td v-for="cell in row" :key="cell.dateKey"
              
              @click="selectDate(cell)"
          >
            <div :class="cellClass(cell)">{{ cell.day }}</div>
          </td>
        </tr>
      </tbody>
    </table>
 
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const props = defineProps({
  time: String
});


// 修复后代码：
const now = props.time ? new Date(props.time) : new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1;
const currentDate = now.getDate();

const year = ref(currentYear);
const month = ref(currentMonth);
const selected = ref({ year: currentYear, month: currentMonth, day: currentDate });
const dayTime = ref({ year: currentYear, month: currentMonth, day: currentDate });

const emit = defineEmits(['change']);

const updata = () => {
  const selectedDate = new Date(selected.value.year, selected.value.month - 1, selected.value.day);
  
  emit('change', selectedDate);
};
updata()

const quxiao = () => {
  emit('change', null);
};
const years = ref<any>(Array.from({ length: 21 }, (_, i) => currentYear - 10 + i))

const weekDays = ['日', '一', '二', '三', '四', '五', '六'];

function daysInMonth(y: number, m: number) {
  return new Date(y, m, 0).getDate();
}

const calendarRows = computed(() => {
  const firstDay = new Date(year.value, month.value - 1, 1).getDay();
  const days = daysInMonth(year.value, month.value);
  const prevMonthDays = daysInMonth(year.value, month.value - 1 || 12);
  const rows = [];
  let row = [];
  // 上月补位
  for (let i = 0; i < firstDay; i++) {
    const d = prevMonthDays - firstDay + i + 1;
    row.push({ day: d, other: true, dateKey: `prev-${d}` });
  }
  // 本月
  for (let d = 1; d <= days; d++) {
    row.push({ day: d, other: false, dateKey: `cur-${d}` });
    if (row.length === 7) {
      rows.push(row);
      row = [];
    }
  }
  // 下月补位
  let nextDay = 1;
  while (row.length < 7) {
    row.push({ day: nextDay++, other: true, dateKey: `next-${nextDay}` });
  }
  rows.push(row);
  // 可能有6行
  while (rows.length < 6) {
    const r = [];
    for (let i = 0; i < 7; i++) r.push({ day: '', other: true, dateKey: `empty-${rows.length}-${i}` });
    rows.push(r);
  }
  return rows;
});

function cellClass(cell: any) {
  if (cell.other) return 'cdp-other';
  if(cell.day === dayTime.value.day && month.value === dayTime.value.month && year.value === dayTime.value.year){
    if (
      year.value === selected.value.year &&
      month.value === selected.value.month &&
      cell.day === selected.value.day
    ) return 'cdp-selected';
    return 'day'
  }
  if (
    year.value === selected.value.year &&
    month.value === selected.value.month &&
    cell.day === selected.value.day
  ) return 'cdp-selected';
  return '';
}

function selectDate(cell: any) {
  if (cell.other || !cell.day) return;
  selected.value = { year: year.value, month: month.value, day: cell.day };
  updata();
}
function prevMonth() {
  if (month.value === 1) {
    month.value = 12;
    year.value--;
  } else {
    month.value--;
  }
}
function nextMonth() {
  if (month.value === 12) {
    month.value = 1;
    year.value++;
  } else {
    month.value++;
  }
}
function toToday() {
  year.value = currentYear;
  month.value = currentMonth;
  selected.value = { year: currentYear, month: currentMonth, day: currentDate };
}

</script>

<style scoped>
.custom-date-picker {
  background: #fff;
 
  min-width: 320px;
  display: inline-block;
}
.cdp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cdp-select {
  border-radius: 6px;
  padding: 4px 2px;
  width: 100px;
  font-size: 12px;
  background: #fff;
  outline: none;
}
.cdp-btn {
  border: 1px solid #e4e7ed;
  background: #fff;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  cursor: pointer;
  color: #888;
  margin-left: 2px;
  transition: background 0.2s;
}
.cdp-btn:hover {
  background: #f5f7fa;
}
.cdp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
}
.cdp-table th {
  color: #bbb;
  font-weight: 400;
  font-size: 15px;
  padding: 4px 0;
}
.cdp-table td {
  text-align: center;
  font-size: 16px;
  color: #222;
  background: transparent;
  border: none;
  padding: 7px 0;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.cdp-table td.cdp-other {
  color: #d3d3d3;
  cursor: default;
}
.cdp-table td div {
  /* background: #e6f7f2;
  color: #18b3ab;
  font-weight: 600; */
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border:1px solid transparent;
  font-size: 14px;
}
.cdp-table td div:hover{
  border:1px solid rgba(22, 173, 164, 1);
}
.day{
  color: rgba(22, 173, 164, 1);
  cursor: default;
  background: rgba(22, 173, 164, 0.08);
  border-radius: 3px 3px 3px 3px;
}

.cdp-selected{
  background: #16ADA4;
  color: #fff;
  border-radius: 3px 3px 3px 3px;
  font-weight: 600;

}
</style>
